<template>
  <view class="topic-box">
    <view class="top-nav">
      <!-- 顶部 -->
      <TopicTopNav
        :page="config.page"
        :total="config.total"
        :cost-time="config.costTime"
        @reset="againHandle"
      ></TopicTopNav>
    </view>

    <!-- 分析页 -->
    <TopicResult
      ref="refesultRef"
      :cost-time="config.costTime"
      :correctness="config.correctness"
      :topic-list="topicList"
      @again="againHandle"
    ></TopicResult>

    <!-- 题目区域 -->
    <view class="topic-context">
      <view>{{ topicList?.[config.page - 1]?.answer }}</view>
      <view
        class="topic-text"
        v-html="topicList?.[config.page - 1]?.topic"
      ></view>
      <view style="margin-top: 20rpx">{{
        topicList?.[config.page - 1]?.tip
      }}</view>
      <view v-if="topicConfig?.config?.deviation" class="deviation">{{
        `允许误差 ${topicConfig?.config?.deviation * 100}%`
      }}</view>
    </view>

    <!-- 输入键盘 -->
    <view v-if="topicConfig?.config?.type === 'js'" class="keyboard-box">
      <TopicKeyboard
        v-model:input-val="inputValue"
        @ok="submit"
      ></TopicKeyboard>
    </view>
    <view v-if="topicConfig?.config?.type === 'bj'" class="keyboard-box">
      <TopicCompare @ok="compareSubmit"></TopicCompare>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { TopicNav, TopicKeyboard, TopicResult } from '@/components'
import TopicTopNav from '@/components/topic-nav/src/top-nav.vue'
import TopicKeyboard from '@/components/keyboard/src/index.vue'
import TopicResult from '@/components/topic-result/src/result.vue'
import TopicCompare from '@/components/topic-compare/src/index.vue'

import { useComputeStore } from '@/store'
import { isFunction } from 'lodash-es'
import type { TopicConfig } from './types/topic'

const computeStore = useComputeStore()

const topicConfig = ref<{
  config?: TopicConfig
  correctness?: string | number
}>()

uni.$on('dataAnalysisSPractice', (data) => {
  topicConfig.value = data
  console.log(topicConfig.value?.config, 8888888888)
  generateSubtractionProblem()
})

const refesultRef = ref<InstanceType<typeof TopicResult>>()

const topicList = ref<GenerateTopicType[]>([])

const inputValue = ref('')

/**
 * 重开
 */
const againHandle = () => {
  topicList.value = []
  inputValue.value = ''
  generateSubtractionProblem()
  refesultRef.value?.close()
  config.value.page = 1
  startTime()
}

/**
 * 生成题目
 */
function generateSubtractionProblem() {
  if (!isFunction(topicConfig.value?.config?.generateTopic)) {
    return
  }

  const generateTopicNumber =
    topicConfig.value?.config?.generateTopicNumber || 10

  for (let i = 0; i < generateTopicNumber; i++) {
    topicList.value.push(topicConfig.value?.config.generateTopic())
  }

  console.log(topicList.value, 'topicList')
}

/**
 * 比较大小确定操作
 */
const compareSubmit = (e: string) => {
  const item = topicList.value[config.value.page - 1]
  console.log(`答案: ${item.answer},你的回答: ${e}`)

  item['youAnswer'] = e

  if (item.answer == e) {
    item['ok'] = true
  }

  if (config.value.page >= config.value.total) {
    //找出答对的题
    const ok = topicList.value.filter((v) => v.ok)

    if (!computeStore.topic.generateTopicNumber) {
      return
    }

    //计算正确率
    config.value.correctness =
      (ok.length / computeStore.topic.generateTopicNumber) * 100 + '%'

    //打开结果弹窗
    refesultRef.value?.open()
    //暂停计时器
    clearInterval(timeFun.value)
    return
  }

  if (config.value.page < config.value.total) {
    config.value.page++
  }
}

/**
 * 计算题确定操作
 */
const submit = (e: any) => {
  const item = topicList.value[config.value.page - 1]

  console.log(`答案: ${item.answer},你的回答: ${e.inputValue}`)

  item['youAnswer'] = e.inputValue

  const deviation = topicConfig.value?.config?.deviation

  const answer = parseFloat(item.answer as string)

  const res = topicConfig.value?.config?.computed?.({
    answer,
    youAnswer: e.inputValue,
    deviation,
  })

  if (res) {
    item['ok'] = true
  } else {
    if (item.answer == e.inputValue) {
      item['ok'] = true
    }
  }

  console.log(topicList.value)

  if (config.value.page >= config.value.total) {
    //找出答对的题
    const ok = topicList.value.filter((v) => v.ok)

    if (!computeStore.topic.generateTopicNumber) {
      return
    }

    //计算正确率
    config.value.correctness =
      (ok.length / computeStore.topic.generateTopicNumber) * 100 + '%'

    //打开结果弹窗
    refesultRef.value?.open()
    //暂停计时器
    clearInterval(timeFun.value)
    return
  }

  if (config.value.page < config.value.total) {
    config.value.page++
  }
}

const config = ref({
  page: 1,
  total: 10,
  costTime: 0,
  correctness: '0%',
})

/**
 * 开始计时
 */
const timeFun = ref()
const startTime = () => {
  config.value.costTime = 0
  clearInterval(timeFun.value)
  timeFun.value = setInterval(() => {
    config.value.costTime++
  }, 1000)
}

startTime()
</script>
<style lang="scss" scoped>
.topic-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;

  .top-nav {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    background-color: #fff;
  }

  .topic-context {
    width: 100%;
    height: 500rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .topic-text {
      margin-top: 100rpx;
      font-size: 1.5rem;
      font-weight: 700;
    }

    .deviation {
      margin-top: 20rpx;
    }
  }

  .keyboard-box {
    width: 100%;
    position: absolute;
    bottom: 0;
  }
}
</style>
